<template>
    <div class="g-button-group">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "button-group",
        mounted() {
            // 告诉用户 g-button-group 组件里面不可以乱套组件，只能套用g-button
            let nodes = this.$el.children;
            for (let node of nodes) {
                let name = node.nodeName.toLowerCase();
                if (name !== 'button') {
                    console.warn( `g-button-group组件，子元素只可以是g-button, 不可以是${name}`);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .g-button-group {
        display: inline-flex;
        vertical-align: middle;
        .g-button {
            &:not(:first-child) {
                margin-left: -1px;
            }
            border-radius: 0;

            &:first-child {
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
            }
            &:last-child {
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
            }
            &:hover {
                /*background-color: red;*/
                position: relative;
                z-index: 1;
            }
        }
    }

</style>